﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        li.selected
        {
            background-color: lightblue;
        }
    </style>
    <script src="../js/jquery.js"></script>
    <script src="../js/mootools.js"></script>
    <script src="../js/base.js"></script>
    <script type="text/javascript">
        var Selectable = new Class({
            initialize: function (selector, opts)
            {
                var me = this;
                var multiple = false;
                me.SelectedIndex = [];
                me.SelectedItem = [];
                me.Enable = true;
                $(selector).find("li").click(function ()
                {
                    if (multiple)
                    {
                        $(this).toggleClass("selected");
                    }
                    else
                    {
                        $(selector).find("li").removeClass("selected").filter(this).addClass("selected");
                    }
                    me.SelectedIndex.empty().push($(selector).find("li").indexes(".selected"));
                });
            },
            implement: {
                Enable: function () { },
            }
        });

        jQuery(function ()
        {
            var SSS = new Selectable("#SSS");
            var DDD = new Selectable("#DDD");
            $("#View").click(function ()
            {
                alert(SSS.SelectedIndex);
            });
        });

    </script>
</head>
<body>
    <ul id="SSS">
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>

    </ul>

    <ol id="DDD">
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>

    </ol>
    <input type="button" value="查看" id="View" />
</body>
</html>
